<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=750 target-densitydpi=device-dpi,user-scalable=no">
    <title> 8个奖品 </title>
    <link type="text/css" rel="stylesheet" href="css/gongge.css" >
</head>
<body>
    <div class="content">
         <p id="stop">停止</p>

            <div class="lotteryBox cen_lr pos">
               <div id="lottery" >
                <div ><img src="images/pic-1.png"></div>
                <div ><img src="images/pic-2.png"></div>
                <div ><img src="images/pic-3.png"></div>
                <div ><img src="images/pic-2.png"></div>
                <div ><img src="images/pic-3.png"></div>
                <div ><img src="images/pic-4.png"></div>
                <div ><img src="images/pic-3.png"></div>
                <div ><img src="images/pic-4.png"></div>
              </div>

               <p id="lotStartBtn"><img src="images/pic-5.png"></p>
            </div>

    </div>
    
    <script type="text/javascript" src="src/lucky.js"></script>
    <script type="text/javascript" src="src/grid.js"></script>


    <script type="text/javascript" >

        var oStartBtn = document.querySelector('#lotStartBtn');
        var oStop = document.querySelector('#stop');

        var grid =  lucky.grid("#lottery",{
            waiting:    5000, //匀速转动时长
            index:      2,   //初始位置
            onEnd:function(){
              console.log('结束');
              oStartBtn.dataset.disable = "";
           }
   
         });

        oStartBtn.onclick = function(){
           if(this.dataset.disable == "disable"){return;} 
           this.dataset.disable = "disable";

           grid.start(); //开启

            //ajax里 获取中奖 目标
            setTimeout(function(){
               grid.target = 0;
            } , 2000);

        };

        oStop.onclick = function(){
           grid.stop();
        };

    </script>


</body>
</html>

